<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import { postJbfaTable } from "@/api/table";

const city = window.globalObj.name;
const editorRef10 = shallowRef();
const valueHtml10 =
  ref(`能力标准：各目标单位均应建设指挥系统，与人防指挥所互联互通，能够保证市、县（区）人防指挥所与目标单位之间指挥信息上传下达，能够保障现场组织指挥目标防护工作，总计应建设人防指挥系统***套。
能力需求：共有****个目标单位需要补充建设指挥系统、配备相应的指挥通信设备，目前各重要目标单位均无法与市级互联互通。`);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(
  `能力标准：每个重要目标单位，应根据本单位目标防护要求，至少应分别建有相应的主要专业防护力量各1支，总计应建设XX支目标防护专业力量。`
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 = ref(
  `能力需求：按需求增建XX个目标防护专业的。具体情况如下：`
);
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref(
  `能力标准：每个重要目标单位均应建设1套与本单位目标防护相适的防护场所和防护设施（场所和防护设施数量、规模依目标防护需求确定），按标准建设$$$个防护场所，$$$$套防护设备。
能力需求：共应建设##个防护场所，###套防护设备。`
);
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};
const editorRef14 = shallowRef();
const valueHtml14 = ref("防护场所及防护措施手段能力需求");
const toolbarConfig14 = {};
const editorConfig14 = { placeholder: "请输入内容..." };
const mode14 = ref("default");
const handleCreated14 = (editor) => {
  editorRef14.value = editor; // 记录 editor 实例，重要！
};

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};
// 重要目标指挥体系能力标准一览表
const zybzList = ref([]);
const getZybzData = () => {
  return postJbfaTable("zymbzhtxnlbzListXZ").then((res) => {
    if (res.code === 200) {
      zybzList.value = res?.data || [];
    }
  });
};
// 重要目标防护指挥体系能力需求清单
const zyxqList = ref([]);
const getZyxqData = () => {
  return postJbfaTable("zymbzhtxnlbzListXQ").then((res) => {
    if (res.code === 200) {
      zyxqList.value = res?.data || [];
    }
  });
};
// 重要目标单位专业队能力标准一览表
const zydbzList = ref([]);
const getZydbzData = () => {
  return postJbfaTable("zymbdwzydnlbzListXZ").then((res) => {
    if (res.code === 200) {
      zydbzList.value = res?.data || [];
    }
  });
};
// 重要目标单位专业队能力需求清单
const zydxqList = ref([]);
const getZydxqData = () => {
  return postJbfaTable("zymbdwzydnlbzListXQ").then((res) => {
    if (res.code === 200) {
      zydxqList.value = res?.data || [];
    }
  });
};
// 重要目标防护能力标准一览表
const fhbzList = ref([]);
const getFhbzData = () => {
  return postJbfaTable("zymbfhnlbzListXZ").then((res) => {
    if (res.code === 200) {
      fhbzList.value = res?.data || [];
    }
  });
};
// 重要目标防护能力需求清单
const fhxqList = ref([]);
const getFhxqData = () => {
  return postJbfaTable("zymbfhnlbzListXQ").then((res) => {
    if (res.code === 200) {
      fhxqList.value = res?.data || [];
    }
  });
};
// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "能力需求-重要目标防护行动能力需求" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml10.value =
      data.find((x) => x.k === "目标单位指挥体系能力需求")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "能力标准")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "能力需求")?.v || "";
    valueHtml13.value = data.find((x) => x.k === "防护能力标准")?.v || "";
    // valueHtml14.value = data.find((x) => x.k === "防护能力需求")?.v || "";
  });
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "能力需求-重要目标防护行动能力需求",
      data: [
        {
          k: "目标单位指挥体系能力需求",
          v: valueHtml10.value,
        },
        {
          k: "能力标准",
          v: valueHtml11.value,
        },
        {
          k: "能力需求",
          v: valueHtml12.value,
        },
        {
          k: "防护能力标准",
          v: valueHtml13.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  // await getZybzData();
  // await getZyxqData();
  // await getZydbzData();
  await getZydxqData();
  // await getFhbzData();
  await getFhxqData();
});
onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
  if (editorRef14.value) editorRef14.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="目标单位指挥体系能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <FirstTitle name="重要目标防护专业力量能力需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}重要目标单位专业队能力需求清单
    </div>

    <el-table :data="zydxqList" class="top-15" style="width: 100%" border>
      <el-table-column prop="data0" label="行政区划" align="center" />
      <el-table-column prop="data1" label="重要目标单位名称" align="center" />
      <el-table-column prop="data2" label="抢险抢修" align="center" />
      <el-table-column prop="data3" label="消防救援" align="center" />
      <el-table-column prop="data4" label="医疗救护" align="center" />
      <el-table-column prop="data5" label="防化防疫" align="center" />
      <el-table-column prop="data6" label="治安" align="center" />
      <el-table-column prop="data7" label="交通运输" align="center" />
      <el-table-column prop="data8" label="通信" align="center" />
      <el-table-column prop="data9" label="信息防护" align="center" />
      <el-table-column prop="data10" label="心理防护" align="center" />
      <el-table-column prop="data11" label="伪装防护" align="center" />
    </el-table>

    <FirstTitle name="防护场所及防护措施手段" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>
    <!--  <el-table :data="fhbzList" class="top-15" style="width: 100%" border>
      <el-table-column prop="data0" label="行政区划" align="center" />
      <el-table-column prop="data1" label="重要目标数量" align="center" />
      <el-table-column prop="c3" label="防护场所" align="center">
        <el-table-column prop="data2" label="关键部位地下工程" align="center" />
        <el-table-column prop="data3" label="关键部位工程加固" align="center" />
        <el-table-column prop="data4" label="转移场地" align="center" />
      </el-table-column>
      <el-table-column prop="c3" label="防护设备" align="center">
        <el-table-column prop="data5" label="烟雾伪装" align="center" />
        <el-table-column prop="data6" label="变形遮障" align="center" />
        <el-table-column prop="data7" label="电子遮障" align="center" />
        <el-table-column prop="data8" label="假目标" align="center" />
        <el-table-column prop="data9" label="拦阻气球" align="center" />
        <el-table-column prop="data10" label="空中钢索" align="center" />
        <el-table-column prop="data11" label="空中拦网" align="center" />
        <el-table-column prop="data12" label="箔条弹" align="center" />
        <el-table-column prop="data13" label="角反射器" align="center" />
        <el-table-column prop="data14" label="雷达干扰" align="center" />
        <el-table-column prop="data15" label="GPS干扰" align="center" />
        <el-table-column prop="data16" label="红外干扰" align="center" />
        <el-table-column prop="data17" label="电子干扰" align="center" />
      </el-table-column>
    </el-table> -->

    <!--  <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef14"
        :defaultConfig="toolbarConfig14"
        :mode="mode14"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml14"
        :defaultConfig="editorConfig14"
        :mode="mode14"
        @onCreated="handleCreated14"
      />
    </div> -->
    <div class="top-15 zddj text-center">
      {{ city }}重要目标防护能力需求清单
    </div>
    <el-table :data="fhxqList" class="top-15" style="width: 100%" border>
      <el-table-column prop="data0" label="行政区划" align="center" />
      <el-table-column prop="data1" label="重要目标名称" align="center" />
      <el-table-column prop="c3" label="防护场所" align="center">
        <el-table-column prop="data2" label="关键部位地下工程" align="center" />
        <el-table-column prop="data3" label="关键部位工程加固" align="center" />
        <el-table-column prop="data4" label="转移场地" align="center" />
      </el-table-column>
      <el-table-column prop="c3" label="防护设备" align="center">
        <el-table-column prop="data5" label="烟雾伪装" align="center" />
        <el-table-column prop="data6" label="变形遮障" align="center" />
        <el-table-column prop="data7" label="电子遮障" align="center" />
        <el-table-column prop="data8" label="假目标" align="center" />
        <el-table-column prop="data9" label="拦阻气球" align="center" />
        <el-table-column prop="data10" label="空中钢索" align="center" />
        <el-table-column prop="data11" label="空中拦网" align="center" />
        <el-table-column prop="data12" label="箔条弹" align="center" />
        <el-table-column prop="data13" label="角反射器" align="center" />
        <el-table-column prop="data14" label="雷达干扰" align="center" />
        <el-table-column prop="data15" label="GPS干扰" align="center" />
        <el-table-column prop="data16" label="红外干扰" align="center" />
        <el-table-column prop="data17" label="电子干扰" align="center" />
      </el-table-column>
    </el-table>
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
